const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin') 
const  { CleanWebpackPlugin }  =require('clean-webpack-plugin');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 
module.exports = {
    devServer:{ // 开发
    //   contentBase: path.join(__dirname, 'public'),
        compress: true , // 会 gzip(压缩) 和 serve(服务) 所有来自项目根路径下 dist/ 目录的文件：
        open: true , // 将运行进度输出到控制台。
        progress:true , // 显示进度条
        hotOnly: true , // 启动热更新
        port: 9000 , // 端口
        proxy: {
        '/baseApi/*': {
          target: 'http://localhost:3000/', // 测试
          changeOrigin: true, // 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,
          secure: false,  // 如果是https接口，需要配置这个参数
          pathRewrite: {
            ['^' + '/baseApi']: ''
          }
        }
      }
    },
    mode:'development' , // 生产 production  开发 development
    entry:{
      // 先找到每一个入口， 然后从各个入口分别出发， 找到依赖的模块（mudule）
      // 然后生成一个chunk(代码块) 最后把chunk 写在文件系统中（Assets）
      index:"./src/main.js",
      base:"./src/base.js"
  }, // 入口
    output: { // 输出
        filename:"js/[name].[hash:8].js", // 打包的文件名 是entry 的key  hash 是打包文件大小计算的
        path: path.join(__dirname, 'dist') // path 指定输出的目录
    }, 
    resolve: {  // 配置别名
        extensions: ['.js', '.vue', '.json'], // 引入模块不用加扩张名
        alias: {
            "@":path.resolve("src"),
            }
    },  
    module: { // 配置相应的 loader
        rules: [
          {
            test: /\.css$/,
            // 对同一个模块使用多个 loader，注意顺序
            use: [
                MiniCssExtractPlugin.loader,
                { loader: "css-loader" },
            ]
          },
          {
            test: /\.scss$/,
            // 对同一个模块使用多个 loader，注意顺序
            use: [
                {
                loader: MiniCssExtractPlugin.loader,
                options : {
                    publicPath: '../'
                  },
                },
                { loader: "css-loader" },
                { loader: "sass-loader" },
            ]
          },
          {
            // url-loader 可以在文件比较小的时候直接变成base64
            test:/\.(png|jpg|gif|svg|bmp|jpeg)/,
            use:{
                loader :'url-loader',
                options: {
                    limit: 10000,
                    esModule: false,
                    name: 'images/[name]_[hash:7].[ext]',
                }
            }
          },
          {
            test:/\.(html|htm)$/,
             use:'html-withimg-loader', // 解析 html中的图片资源
          },
          {
            test:/\.vue$/,
            use:'vue-loader'
          }
        ]
    },
    optimization: {
        splitChunks: {
            cacheGroups: {
                default: {
                    name: 'common',
                    chunks: 'initial',
                    minChunks: 2  //模块被引用2次以上的才抽离
                },
                vendors: {  //拆分第三方库（通过npm|yarn安装的库）
                    test: /[\\/]node_modules[\\/]/,
                    name: 'vendor',
                    chunks: 'initial',
                    priority: -10
                }
            }
        }
    },
    plugins: [ // 插件配置
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './public/index.html',
            chunks:['index'],
            filename: 'index.html'
        }),
        new HtmlWebpackPlugin({
          template:'./public/base.html',//指定产出的html模版
          filename:'base/index.html', // 产出的html文件名
          chunks:['base'],
          hash:true, // 会在引入的js 加入查询字符串
          minify: { // 是否压缩
              removeAttributeQuotes :true
          }
      }),
        new MiniCssExtractPlugin({
            filename: "css/common.css"
        }),
        new VueLoaderPlugin(),
        // new BundleAnalyzerPlugin()
    ],
  }